<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职场社交 - 综合内容平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #2563eb;
            --primary-light: #eff6ff;
            --primary-dark: #1d4ed8;
            --secondary: #64748b;
            --dark: #1e293b;
            --light: #f8fafc;
            --border: #e2e8f0;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            --card-shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.08);
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            padding: 0.75rem 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .nav-link {
            color: var(--dark);
            font-weight: 500;
            transition: color 0.2s;
            padding: 0.5rem 0.75rem !important;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--primary);
        }
        
        .user-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid transparent;
            transition: border-color 0.2s;
        }
        
        .user-avatar:hover {
            border-color: var(--primary);
        }
        
        /* 主容器样式 */
        .main-container {
            padding: 2rem 0;
        }
        
        .page-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        /* 内容类型切换 */
        .content-tabs {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--card-shadow);
            margin-bottom: 1.5rem;
            overflow: hidden;
        }
        
        .nav-tabs {
            border-bottom: 1px solid var(--border);
            margin-bottom: 0;
        }
        
        .nav-tabs .nav-item {
            margin-bottom: 0;
        }
        
        .nav-tabs .nav-link {
            border: none;
            border-bottom: 3px solid transparent;
            border-radius: 0;
            color: var(--secondary);
            font-weight: 500;
        }
        
        .nav-tabs .nav-link.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
            background-color: transparent;
        }
        
        /* 通用卡片样式 */
        .content-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--card-shadow);
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
            margin-bottom: 1.5rem;
        }
        
        .content-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--card-shadow-hover);
        }
        
        .content-header {
            padding: 1.25rem;
            border-bottom: 1px solid var(--border);
        }
        
        .content-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--dark);
            text-decoration: none;
        }
        
        .content-title:hover {
            color: var(--primary);
        }
        
        .content-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            font-size: 0.85rem;
            color: var(--secondary);
        }
        
        .content-creator {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .content-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .content-body {
            padding: 1.25rem;
        }
        
        .content-footer {
            padding: 1rem 1.25rem;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .content-stats {
            display: flex;
            gap: 1.5rem;
            font-size: 0.85rem;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            color: var(--secondary);
        }
        
        .stat-item i {
            font-size: 0.9rem;
        }
        
        .content-actions {
            display: flex;
            gap: 0.75rem;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: var(--secondary);
            cursor: pointer;
            transition: color 0.2s;
            display: flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.85rem;
        }
        
        .action-btn:hover {
            color: var(--primary);
        }
        
        /* 投票详情样式 */
        .voting-detail-header {
            padding: 1.5rem;
        }
        
        .voting-detail-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        
        .voting-detail-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .voting-status {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.25rem 0.75rem;
            border-radius: 999px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .status-active {
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--success);
        }
        
        .status-closed {
            background-color: rgba(239, 68, 68, 0.1);
            color: var(--danger);
        }
        
        .voting-description {
            padding: 0 1.5rem 1.5rem;
            border-bottom: 1px solid var(--border);
            color: var(--secondary);
        }
        
        .voting-detail-options {
            padding: 1.5rem;
        }
        
        .voting-detail-option {
            position: relative;
            padding: 1.25rem;
            border: 1px solid var(--border);
            border-radius: 8px;
            margin-bottom: 1rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .voting-detail-option:hover {
            border-color: var(--primary);
            background-color: var(--primary-light);
        }
        
        .voting-detail-option.selected {
            border-color: var(--primary);
            background-color: rgba(37, 99, 235, 0.05);
        }
        
        .voting-detail-footer {
            padding: 1.5rem;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .voting-participants {
            font-size: 0.9rem;
            color: var(--secondary);
        }
        
        .vote-detail-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 0.6rem 1.5rem;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .vote-detail-btn:hover {
            background-color: var(--primary-dark);
        }
        
        .vote-detail-btn.voted {
            background-color: var(--success);
        }
        
        /* 文章列表样式 */
        .article-preview {
            color: var(--secondary);
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .article-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 6px;
            margin-bottom: 1rem;
        }
        
        /* 相册列表样式 */
        .album-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .album-image {
            width: 100%;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
        }
        
        .album-image:nth-child(2) {
            grid-column: span 2;
            grid-row: span 2;
            height: auto;
        }
        
        /* 动态列表样式 */
        .feed-content {
            margin-bottom: 1rem;
        }
        
        .feed-image {
            width: 100%;
            border-radius: 6px;
            margin-bottom: 1rem;
        }
        
        /* 服务列表样式 */
        .service-tag {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            background-color: var(--primary-light);
            color: var(--primary);
            border-radius: 4px;
            font-size: 0.8rem;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
        }
        
        .service-price {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--primary);
            margin: 0.75rem 0;
        }
        
        /* 招聘求职列表样式 */
        .job-position {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        
        .job-company {
            color: var(--secondary);
            margin-bottom: 0.75rem;
            font-size: 0.9rem;
        }
        
        .job-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .job-tag {
            padding: 0.2rem 0.6rem;
            background-color: var(--primary-light);
            color: var(--primary);
            border-radius: 4px;
            font-size: 0.8rem;
        }
        
        /* 问答列表样式 */
        .question-content {
            margin-bottom: 1rem;
        }
        
        .answer-count {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.25rem 0.75rem;
            background-color: var(--primary-light);
            color: var(--primary);
            border-radius: 4px;
            font-size: 0.85rem;
        }
        
        /* 列表容器样式 */
        .content-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        /* 分页样式 */
        .pagination-container {
            margin-top: 2rem;
            display: flex;
            justify-content: center;
        }
        
        .pagination {
            display: flex;
            gap: 0.5rem;
        }
        
        .page-btn {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .page-btn:hover:not(.active):not(.disabled) {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .page-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .page-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        

        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .content-list {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
        }
        
        @media (max-width: 768px) {
            .content-list {
                grid-template-columns: 1fr;
            }
            
            .nav-tabs {
                overflow-x: auto;
                flex-wrap: nowrap;
            }
            
            .voting-detail-meta {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .content-stats {
                gap: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-comments"></i>
                职场社交
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto gap-4">
                    <li class="nav-item"><a href="#" class="nav-link active">首页</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">发现</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">人脉</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">消息</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">通知</a></li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" title="个人中心">
                            <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="user-avatar">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <div class="container main-container">
        <h1 class="page-title">
            <i class="fas fa-th-large"></i>
            内容中心
        </h1>
        
        <!-- 内容类型切换标签 -->
        <div class="content-tabs">
            <ul class="nav nav-tabs" id="contentTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="voting-tab" data-bs-toggle="tab" data-bs-target="#voting-content" type="button" role="tab">
                        <i class="fas fa-poll-h"></i> 投票详情
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="articles-tab" data-bs-toggle="tab" data-bs-target="#articles-content" type="button" role="tab">
                        <i class="fas fa-newspaper"></i> 文章
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="albums-tab" data-bs-toggle="tab" data-bs-target="#albums-content" type="button" role="tab">
                        <i class="fas fa-images"></i> 相册
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="feeds-tab" data-bs-toggle="tab" data-bs-target="#feeds-content" type="button" role="tab">
                        <i class="fas fa-stream"></i> 动态
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="services-tab" data-bs-toggle="tab" data-bs-target="#services-content" type="button" role="tab">
                        <i class="fas fa-concierge-bell"></i> 服务
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="jobs-tab" data-bs-toggle="tab" data-bs-target="#jobs-content" type="button" role="tab">
                        <i class="fas fa-briefcase"></i> 招聘
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="resumes-tab" data-bs-toggle="tab" data-bs-target="#resumes-content" type="button" role="tab">
                        <i class="fas fa-user-tie"></i> 求职
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="qa-tab" data-bs-toggle="tab" data-bs-target="#qa-content" type="button" role="tab">
                        <i class="fas fa-question-circle"></i> 问答
                    </button>
                </li>
            </ul>
            
            <div class="tab-content" id="contentTabsContent">
                <!-- 投票详情 -->
                <div class="tab-pane fade show active" id="voting-content" role="tabpanel">
                    <div class="content-card">
                        <div class="voting-detail-header">
                            <h2 class="voting-detail-title">你认为未来一年最具发展潜力的技术是什么？</h2>
                            
                            <div class="voting-detail-meta">
                                <div class="content-creator">
                                    <img src="https://picsum.photos/100/100?random=10" alt="李明" class="content-avatar">
                                    <span>李明</span>
                                </div>
                                <div>
                                    <i class="far fa-clock"></i> 发布于 2023-06-15
                                </div>
                                <div>
                                    <i class="far fa-calendar-alt"></i> 剩余3天结束
                                </div>
                                <span class="voting-status status-active">
                                    <i class="fas fa-circle"></i> 进行中
                                </span>
                                <div>
                                    <i class="fas fa-folder"></i> 科技
                                </div>
                            </div>
                            
                            <div class="voting-description">
                                随着科技的快速发展，新兴技术不断涌现。在未来一年里，你认为哪些技术将引领行业发展，成为最具潜力的领域？欢迎参与投票并分享你的观点。
                            </div>
                        </div>
                        
                        <div class="voting-detail-options">
                            <label class="voting-detail-option">
                                <input type="radio" name="detail-vote" class="option-checkbox" style="position: absolute; opacity: 0;">
                                <span class="option-custom-checkbox" style="position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid var(--secondary); border-radius: 4px; transition: all 0.2s;"></span>
                                <div class="option-text" style="margin-left: 2.5rem; margin-bottom: 0.75rem; font-weight: 500;">生成式AI</div>
                                <div class="voting-progress" style="margin-left: 2.5rem; height: 10px; margin-bottom: 0.5rem;">
                                    <div class="progress-bar" style="width: 45%;"></div>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-left: 2.5rem; font-size: 0.85rem; color: var(--secondary);">
                                    <span>45% 的用户选择了此项</span>
                                    <span>1,061 票</span>
                                </div>
                            </label>
                            
                            <label class="voting-detail-option">
                                <input type="radio" name="detail-vote" class="option-checkbox" style="position: absolute; opacity: 0;">
                                <span class="option-custom-checkbox" style="position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid var(--secondary); border-radius: 4px; transition: all 0.2s;"></span>
                                <div class="option-text" style="margin-left: 2.5rem; margin-bottom: 0.75rem; font-weight: 500;">云计算</div>
                                <div class="voting-progress" style="margin-left: 2.5rem; height: 10px; margin-bottom: 0.5rem;">
                                    <div class="progress-bar" style="width: 25%;"></div>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-left: 2.5rem; font-size: 0.85rem; color: var(--secondary);">
                                    <span>25% 的用户选择了此项</span>
                                    <span>589 票</span>
                                </div>
                            </label>
                            
                            <label class="voting-detail-option">
                                <input type="radio" name="detail-vote" class="option-checkbox" style="position: absolute; opacity: 0;">
                                <span class="option-custom-checkbox" style="position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid var(--secondary); border-radius: 4px; transition: all 0.2s;"></span>
                                <div class="option-text" style="margin-left: 2.5rem; margin-bottom: 0.75rem; font-weight: 500;">区块链</div>
                                <div class="voting-progress" style="margin-left: 2.5rem; height: 10px; margin-bottom: 0.5rem;">
                                    <div class="progress-bar" style="width: 15%;"></div>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-left: 2.5rem; font-size: 0.85rem; color: var(--secondary);">
                                    <span>15% 的用户选择了此项</span>
                                    <span>354 票</span>
                                </div>
                            </label>
                            
                            <label class="voting-detail-option">
                                <input type="radio" name="detail-vote" class="option-checkbox" style="position: absolute; opacity: 0;">
                                <span class="option-custom-checkbox" style="position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid var(--secondary); border-radius: 4px; transition: all 0.2s;"></span>
                                <div class="option-text" style="margin-left: 2.5rem; margin-bottom: 0.75rem; font-weight: 500;">元宇宙</div>
                                <div class="voting-progress" style="margin-left: 2.5rem; height: 10px; margin-bottom: 0.5rem;">
                                    <div class="progress-bar" style="width: 15%;"></div>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-left: 2.5rem; font-size: 0.85rem; color: var(--secondary);">
                                    <span>15% 的用户选择了此项</span>
                                    <span>354 票</span>
                                </div>
                            </label>
                        </div>
                        
                        <div class="voting-detail-footer">
                            <div class="voting-participants">
                                <i class="fas fa-users"></i> 已有 2,358 人参与投票
                            </div>
                            <button class="vote-detail-btn" id="detail-vote-btn">
                                <i class="fas fa-check"></i> 投票
                            </button>
                        </div>
                    </div>
                    
                    <!-- 投票评论区 -->
                    <div class="content-card">
                        <div class="content-header">
                            <h3 class="content-title">投票讨论 (42)</h3>
                        </div>
                        <div class="content-body">
                            <!-- 评论输入框 -->
                            <div class="mb-4">
                                <textarea class="form-control" rows="3" placeholder="分享你的观点..."></textarea>
                                <div class="d-flex justify-content-end mt-2">
                                    <button class="btn btn-primary">
                                        <i class="fas fa-paper-plane"></i> 发表评论
                                    </button>
                                </div>
                            </div>
                            
                            <!-- 评论列表 -->
                            <div class="comment-list">
                                <!-- 评论1 -->
                                <div class="mb-4 pb-4 border-bottom">
                                    <div class="d-flex gap-2 mb-2">
                                        <img src="https://picsum.photos/100/100?random=20" alt="张工" class="content-avatar">
                                        <div>
                                            <div class="font-weight-medium">张工</div>
                                            <div class="text-sm text-secondary">2小时前</div>
                                        </div>
                                    </div>
                                    <div class="comment-content mb-2">
                                        我认为生成式AI确实是未来一年最值得关注的技术，它已经开始在内容创作、代码生成等多个领域展现出巨大潜力。
                                    </div>
                                    <div class="d-flex gap-3 text-sm">
                                        <button class="action-btn"><i class="far fa-thumbs-up"></i> 赞同 (18)</button>
                                        <button class="action-btn"><i class="far fa-comment"></i> 回复</button>
                                    </div>
                                </div>
                                
                                <!-- 评论2 -->
                                <div class="mb-4 pb-4 border-bottom">
                                    <div class="d-flex gap-2 mb-2">
                                        <img src="https://picsum.photos/100/100?random=21" alt="王教授" class="content-avatar">
                                        <div>
                                            <div class="font-weight-medium">王教授</div>
                                            <div class="text-sm text-secondary">昨天 15:30</div>
                                        </div>
                                    </div>
                                    <div class="comment-content mb-2">
                                        云计算虽然不是新技术，但它的发展和普及仍然是其他技术发展的基础。没有强大的云计算支持，很多AI应用也难以落地。
                                    </div>
                                    <div class="d-flex gap-3 text-sm">
                                        <button class="action-btn"><i class="far fa-thumbs-up"></i> 赞同 (7)</button>
                                        <button class="action-btn"><i class="far fa-comment"></i> 回复</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 文章列表 -->
                <div class="tab-pane fade" id="articles-content" role="tabpanel">
                    <div class="content-list">
                        <!-- 文章1 -->
                        <div class="content-card">
                            <img src="https://picsum.photos/600/400?random=30" alt="AI发展趋势" class="article-image">
                            <div class="content-body">
                                <h3 class="content-title">
                                    <a href="#">2023年生成式AI发展趋势与应用场景分析</a>
                                </h3>
                                <div class="content-meta">
                                    <div class="content-creator">
                                        <img src="https://picsum.photos/100/100?random=31" alt="科技前沿" class="content-avatar">
                                        <span>科技前沿</span>
                                    </div>
                                    <div>
                                        <i class="far fa-clock"></i> 3天前
                                    </div>
                                    <div>
                                        <i class="fas fa-folder"></i> 人工智能
                                    </div>
                                </div>
                                <p class="article-preview">
                                    生成式AI在过去一年取得了突破性进展，从文本生成到图像创作，再到代码编写，其应用范围不断扩大。本文将深入分析生成式AI的最新发展趋势，并探讨其在各行业的应用前景...
                                </p>
                            </div>
                            <div class="content-footer">
                                <div class="content-stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i> 2.4k
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i> 42
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-thumbs-up"></i> 156
                                    </div>
                                </div>
                                <div class="content-actions">
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i> 收藏
                                    </button>
                                    <button class="action-btn">
                                        <i class="fas fa-share-alt"></i> 分享
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 文章2 -->
                        <div class="content-card">
                            <img src="https://picsum.photos/600/400?random=32" alt="远程办公指南" class="article-image">
                            <div class="content-body">
                                <h3 class="content-title">
                                    <a href="#">远程办公效率提升指南：工具与方法</a>
                                </h3>
                                <div class="content-meta">
                                    <div class="content-creator">
                                        <img src="https://picsum.photos/100/100?random=33" alt="职场导师" class="content-avatar">
                                        <span>职场导师</span>
                                    </div>
                                    <div>
                                        <i class="far fa-clock"></i> 1周前
                                    </div>
                                    <div>
                                        <i class="fas fa-folder"></i> 职场技巧
                                    </div>
                                </div>
                                <p class="article-preview">
                                    随着远程办公的普及，如何保持高效工作成为许多人的挑战。本文汇总了提升远程办公效率的实用工具和方法，帮助你在灵活工作的同时保持生产力...
                                </p>
                            </div>
                            <div class="content-footer">
                                <div class="content-stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i> 1.8k
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i> 36
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-thumbs-up"></i> 124
                                    </div>
                                </div>
                                <div class="content-actions">
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i> 收藏
                                    </button>
                                    <button class="action-btn">
                                        <i class="fas fa-share-alt"></i> 分享
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 文章3 -->
                        <div class="content-card">
                            <img src="https://picsum.photos/600/400?random=34" alt="区块链应用" class="article-image">
                            <div class="content-body">
                                <h3 class="content-title">
                                    <a href="#">区块链技术在供应链管理中的创新应用</a>
                                </h3>
                                <div class="content-meta">
                                    <div class="content-creator">
                                        <img src="https://picsum.photos/100/100?random=35" alt="技术洞察" class="content-avatar">
                                        <span>技术洞察</span>
                                    </div>
                                    <div>
                                        <i class="far fa-clock"></i> 2周前
                                    </div>
                                    <div>
                                        <i class="fas fa-folder"></i> 区块链
                                    </div>
                                </div>
                                <p class="article-preview">
                                    区块链技术的去中心化、不可篡改特性使其在供应链管理领域具有巨大应用潜力。本文将介绍区块链如何提升供应链的透明度、安全性和效率...
                                </p>
                            </div>
                            <div class="content-footer">
                                <div class="content-stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i> 1.2k
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i> 28
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-thumbs-up"></i> 95
                                    </div>
                                </div>
                                <div class="content-actions">
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i> 收藏
                                    </button>
                                    <button class="action-btn">
                                        <i class="fas fa-share-alt"></i> 分享
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="pagination-container">
                        <div class="pagination">
                            <button class="page-btn disabled">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button class="page-btn active">1</button>
                            <button class="page-btn">2</button>
                            <button class="page-btn">3</button>
                            <button class="page-btn">4</button>
                            <button class="page-btn">5</button>
                            <button class="page-btn">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 相册列表 -->
                <div class="tab-pane fade" id="albums-content" role="tabpanel">
                    <div class="content-list">
                        <!-- 相册1 -->
                        <div class="content-card">
                            <div class="content-body">
                                <div class="album-grid">
                                    <img src="https://picsum.photos/300/300?random=40" alt="会议照片1" class="album-image">
                                    <img src="https://picsum.photos/600/600?random=41" alt="会议照片2" class="album-image">
                                    <img src="https://picsum.photos/300/300?random=42" alt="会议照片3" class="album-image">
                                    <img src="https://picsum.photos/300/300?random=43" alt="会议照片4" class="album-image">
                                </div>
                                <h3 class="content-title">
                                    <a href="#">2023人工智能大会现场照片</a>
                                </h3>
                                <div class="content-meta">
                                    <div class="content-creator">
                                        <img src="https://picsum.photos/100/100?random=44" alt="科技摄影" class="content-avatar">
                                        <span>科技摄影</span>
                                    </div>
                                    <div>
                                        <i class="far fa-clock"></i> 5天前
                                    </div>
                                    <div>
                                        <i class="fas fa-images"></i> 24张照片
                                    </div>
                                </div>
                                <p class="article-preview">
                                    记录2023人工智能大会的精彩瞬间，包括主题演讲、展区展示和嘉宾交流等环节。
                                </p>
                            </div>
                            <div class="content-footer">
                                <div class="content-stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i> 3.2k
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i> 56
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-heart"></i> 215
                                    </div>
                                </div>
                                <div class="content-actions">
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i> 收藏
                                    </button>
                                    <button class="action-btn">
                                        <i class="fas fa-share-alt"></i> 分享
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 相册2 -->
                        <div class="content-card">
                            <div class="content-body">
                                <div class="album-grid">
                                    <img src="https://picsum.photos/300/300?random=45" alt="办公室照片1" class="album-image">
                                    <img src="https://picsum.photos/600/600?random=46" alt="办公室照片2" class="album-image">
                                    <img src="https://picsum.photos/300/300?random=47" alt="办公室照片3" class="album-image">
                                    <img src="https://picsum.photos/300/300?random=48" alt="办公室照片4" class="album-image">
                                </div>
                                <h3 class="content-title">
                                    <a href="#">现代科技公司办公室设计集锦</a>
                                </h3>
                                <div class="content-meta">
                                    <div class="content-creator">
                                        <img src="https://picsum.photos/100/100?random=49" alt="空间设计" class="content-avatar">
                                        <span>空间设计</span>
                                    </div>
                                    <div>
                                        <i class="far fa-clock"></i> 1周前
                                    </div>
                                    <div>
                                        <i class="fas fa-images"></i> 18张照片
                                    </div>
                                </div>
                                <p class="article-preview">
                                    精选全球多家科技公司的办公室设计，展示现代办公空间的创新理念和人性化布局。
                                </p>
                            </div>
                            <div class="content-footer">
                                <div class="content-stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i> 2.7k
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i> 42
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-heart"></i> 187
                                    </div>
                                </div>
                                <div class="content-actions">
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i> 收藏
                                    </button>
                                    <button class="action-btn">
                                        <i class="fas fa-share-alt"></i> 分享
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="pagination-container">
                        <div class="pagination">
                            <button class="page-btn disabled">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button class="page-btn active">1</button>
                            <button class="page-btn">2</button>
                            <button class="page-btn">3</button>
                            <button class="page-btn">4</button>
                            <button class="page-btn">5</button>
                            <button class="page-btn">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 动态列表 -->
                <div class="tab-pane fade" id="feeds-content" role="tabpanel">
                    <div class="content-list">
                        <!-- 动态1 -->
                        <div class="content-card">
                            <div class="content-body">
                                <div class="content-meta mb-3">
                                    <div class="content-creator">
                                        <img src="https://picsum.photos/100/100?random=50" alt="张工程师" class="content-avatar">
                                        <span>张工程师</span>
                                    </div>
                                    <div>
                                        <i class="far fa-clock"></i> 2小时前
                                    </div>
                                </div>
                                <div class="feed-content">
                                    刚刚体验了最新发布的AI代码助手，太令人惊叹了！它不仅能快速理解我的编程意图，还能生成高质量的代码片段，大大提高了开发效率。推荐给所有程序员朋友！
                                </div>
                                <img src="https://picsum.photos/600/400?random=51" alt="AI代码助手截图" class="feed-image">
                            </div>
                            <div class="content-footer">
                                <div class="content-stats">
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i> 32
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-thumbs-up"></i> 145
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-share-alt"></i> 18
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 动态2 -->
                        <div class="content-card">
                            <div class="content-body">
                                <div class="content-meta mb-3">
                                    <div class="content-creator">
                                        <img src="https://picsum.photos/100/100?random=52" alt="李产品经理" class="content-avatar">
                                        <span>李产品经理</span>
                                    </div>
                                    <div>
                                        <i class="far fa-clock"></i> 昨天
                                    </div>
                                </div>
                                <div class="feed-content">
                                    今天参加了产品创新研讨会，收获满满！与行业内的各位专家交流了产品设计的新思路，特别是关于AI在产品体验中的应用，让我对未来的产品规划有了更清晰的方向。
                                </div>
                            </div>
                            <div class="content-footer">
                                <div class="content-stats">
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i> 24
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-thumbs-up"></i> 98
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-share-alt"></i> 12
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="pagination-container">
                        <div class="pagination">
                            <button class="page-btn disabled">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button class="page-btn active">1</button>
                            <button class="page-btn">2</button>
                            <button class="page-btn">3</button>
                            <button class="page-btn">4</button>
                            <button class="page-btn">5</button>
                            <button class="page-btn">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 服务列表 -->
                <div class="tab-pane fade" id="services-content" role="tabpanel">
                    <div class="content-list">
                        <!-- 服务1 -->
                        <div class="content-card">
                            <div class="content-body">
                                <h3 class="content-title">
                                    <a href="#">专业AI模型训练与部署服务</a>
                                </h3>
                                <div class="content-meta mb-3">
                                    <div class="content-creator">
                                        <img src="https://picsum.photos/100/100?random=60" alt="智能科技团队" class="content-avatar">
                                        <span>智能科技团队</span>
                                    </div>
                                    <div>
                                        <i class="far fa-clock"></i> 3天前更新
                                    </div>
                                </div>
                                <div>
                                    <span class="service-tag">AI开发</span>
                                    <span class="service-tag">模型训练</span>
                                    <span class="service-tag">技术咨询</span>
                                </div>
                                <p class="article-preview">
                                    提供定制化AI模型训练与部署服务，包括数据预处理、模型选择、训练优化和生产环境部署全流程支持，帮助企业快速实现AI技术落地。
                                </p>
                                <div class="service-price">
                                    ￥5,000 起
                                </div>
                            </div>
                            <div class="content-footer">
                                <div class="content-stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i> 1.5k
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-star" style="color: #f59e0b;"></i> 4.9 (128)
                                    </div>
                                </div>
                                <button class="btn btn-primary">
                                    <i class="fas fa-arrow-right"></i> 了解详情
                                </button>
                            </div>
                        </div>
                        
                        <!-- 服务2 -->
                        <div class="content-card">
                            <div class="content-body">
                                <h3 class="content-title">
                                    <a href="#">产品设计与用户体验咨询</a>
                                </h3>
                                <div class="content-meta mb-3">
                                    <div class="content-creator">
                                        <img src="https://picsum.photos/100/100?random=61" alt="创意设计工作室" class="content-avatar">
                                        <span>创意设计工作室</span>
                                    </div>
                                    <div>
                                        <i class="far fa-clock"></i> 1周前更新
                                    </div>
                                </div>
                                <div>
                                    <span class="service-tag">UI设计</span>
                                    <span class="service-tag">UX咨询</span>
                                    <span class="service-tag">产品策略</span>
                                </div>
                                <p class="article-preview">
                                    专业的产品设计团队提供从用户研究到界面设计的全流程服务，帮助企业打造用户喜爱的产品，提升用户体验和产品竞争力。
                                </p>
                                <div class="service-price">
                                    ￥8,000 起
                                </div>
                            </div>
                            <div class="content-footer">
                                <div class="content-stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i> 1.2k
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-star" style="color: #f59e0b;"></i> 4.8 (96)
                                    </div>
                                </div>
                                <button class="btn btn-primary">
                                    <i class="fas fa-arrow-right"></i> 了解详情
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="pagination-container">
                        <div class="pagination">
                            <button class="page-btn disabled">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button class="page-btn active">1</button>
                            <button class="page-btn">2</button>
                            <button class="page-btn">3</button>
                            <button class="page-btn">4</button>
                            <button class="page-btn">5</button>
                            <button class="page-btn">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 招聘列表 -->
                <div class="tab-pane fade" id="jobs-content" role="tabpanel">
                    <div class="content-list">
                        <!-- 招聘1 -->
                        <div class="content-card">
                            <div class="content-body">
                                <div class="job-position">资深AI算法工程师</div>
                                <div class="job-company">
                                    <i class="fas fa-building"></i> 未来科技有限公司
                                    <span style="margin-left: 1rem;"><i class="fas fa-map-marker-alt"></i> 北京-海淀区</span>
                                </div>
                                <div class="job-tags">
                                    <span class="job-tag">人工智能</span>
                                    <span class="job-tag">算法</span>
                                    <span class="job-tag">Python</span>
                                    <span class="job-tag">3-5年</span>
                                    <span class="job-tag">全职</span>
                                </div>
                                <p class="article-preview">
                                    负责公司核心AI产品的算法研发与优化，参与从算法设计到落地的全流程，与产品和工程团队紧密合作，推动AI技术在实际业务中的应用。
                                </p>
                            </div>
                            <div class="content-footer">
                                <div class="content-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-money-bill-wave"></i> 25k-40k/月
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-clock"></i> 发布于 3天前
                                    </div>
                                </div>
                                <button class="btn btn-primary">
                                    <i class="fas fa-file-export"></i> 投递简历
                                </button>
                            </div>
                        </div>
                        
                        <!-- 招聘2 -->
                        <div class="content-card">
                            <div class="content-body">
                                <div class="job-position">产品经理（SaaS方向）</div>
                                <div class="job-company">
                                    <i class="fas fa-building"></i> 云服务科技有限公司
                                    <span style="margin-left: 1rem;"><i class="fas fa-map-marker-alt"></i> 上海-浦东新区</span>
                                </div>
                                <div class="job-tags">
                                    <span class="job-tag">产品经理</span>
                                    <span class="job-tag">SaaS</span>
                                    <span class="job-tag">B端产品</span>
                                    <span class="job-tag">5-10年</span>
                                    <span class="job-tag">全职</span>
                                </div>
                                <p class="article-preview">
                                    负责企业级SaaS产品的规划与设计，深入理解用户需求，制定产品 roadmap，协调研发、设计等团队推动产品落地，持续优化产品体验。
                                </p>
                            </div>
                            <div class="content-footer">
                                <div class="content-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-money-bill-wave"></i> 20k-35k/月
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-clock"></i> 发布于 1周前
                                    </div>
                                </div>
                                <button class="btn btn-primary">
                                    <i class="fas fa-file-export"></i> 投递简历
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="pagination-container">
                        <div class="pagination">
                            <button class="page-btn disabled">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button class="page-btn active">1</button>
                            <button class="page-btn">2</button>
                            <button class="page-btn">3</button>
                            <button class="page-btn">4</button>
                            <button class="page-btn">5</button>
                            <button class="page-btn">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 求职列表 -->
                <div class="tab-pane fade" id="resumes-content" role="tabpanel">
                    <div class="content-list">
                        <!-- 求职1 -->
                        <div class="content-card">
                            <div class="content-body">
                                <h3 class="content-title">
                                    <a href="#">王小明 - 前端开发工程师</a>
                                </h3>
                                <div class="content-meta mb-3">
                                    <div class="content-creator">
                                        <img src="https://picsum.photos/100/100?random=70" alt="王小明" class="content-avatar">
                                        <span>王小明</span>
                                    </div>
                                    <div>
                                        <i class="far fa-clock"></i> 2天前更新
                                    </div>
                                </div>
                                <div class="job-tags">
                                    <span class="job-tag">前端开发</span>
                                    <span class="job-tag">JavaScript</span>
                                    <span class="job-tag">React</span>
                                    <span class="job-tag">3年经验</span>
                                    <span class="job-tag">本科</span>
                                </div>
                                <p class="article-preview">
                                    3年前端开发经验，精通HTML5、CSS3、JavaScript，熟悉React、Vue等主流框架，有大型Web应用开发经验，寻求前端开发相关职位。
                                </p>
                                <div style="font-size: 0.9rem; color: var(--primary); margin-top: 1rem;">
                                    <i class="fas fa-map-marker-alt"></i> 期望工作地点：北京
                                    <span style="margin-left: 1rem;"><i class="fas fa-money-bill-wave"></i> 期望薪资：18k-25k/月</span>
                                </div>
                            </div>
                            <div class="content-footer">
                                <div class="content-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i> 356
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-file-alt"></i> 已投递 12 家公司
                                    </div>
                                </div>
                                <button class="btn btn-primary">
                                    <i class="fas fa-download"></i> 下载简历
                                </button>
                            </div>
                        </div>
                        
                        <!-- 求职2 -->
                        <div class="content-card">
                            <div class="content-body">
                                <h3 class="content-title">
                                    <a href="#">张丽 - 数据分析师</a>
                                </h3>
                                <div class="content-meta mb-3">
                                    <div class="content-creator">
                                        <img src="https://picsum.photos/100/100?random=71" alt="张丽" class="content-avatar">
                                        <span>张丽</span>
                                    </div>
                                    <div>
                                        <i class="far fa-clock"></i> 1周前更新
                                    </div>
                                </div>
                                <div class="job-tags">
                                    <span class="job-tag">数据分析</span>
                                    <span class="job-tag">Python</span>
                                    <span class="job-tag">SQL</span>
                                    <span class="job-tag">5年经验</span>
                                    <span class="job-tag">硕士</span>
                                </div>
                                <p class="article-preview">
                                    5年数据分析经验，擅长数据清洗、建模与可视化，熟悉Python数据分析生态系统，有电商和金融行业分析经验，寻求数据分析师或数据科学家职位。
                                </p>
                                <div style="font-size: 0.9rem; color: var(--primary); margin-top: 1rem;">
                                    <i class="fas fa-map-marker-alt"></i> 期望工作地点：上海
                                    <span style="margin-left: 1rem;"><i class="fas fa-money-bill-wave"></i> 期望薪资：25k-35k/月</span>
                                </div>
                            </div>
                            <div class="content-footer">
                                <div class="content-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i> 428
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-file-alt"></i> 已投递 8 家公司
                                    </div>
                                </div>
                                <button class="btn btn-primary">
                                    <i class="fas fa-download"></i> 下载简历
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="pagination-container">
                        <div class="pagination">
                            <button class="page-btn disabled">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button class="page-btn active">1</button>
                            <button class="page-btn">2</button>
                            <button class="page-btn">3</button>
                            <button class="page-btn">4</button>
                            <button class="page-btn">5</button>
                            <button class="page-btn">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 问答列表 -->
                <div class="tab-pane fade" id="qa-content" role="tabpanel">
                    <div class="content-list">
                        <!-- 问答1 -->
                        <div class="content-card">
                            <div class="content-body">
                                <h3 class="content-title">
                                    <a href="#">如何有效提升大型React应用的性能？有哪些实用技巧？</a>
                                </h3>
                                <div class="content-meta mb-3">
                                    <div class="content-creator">
                                        <img src="https://picsum.photos/100/100?random=80" alt="刘开发" class="content-avatar">
                                        <span>刘开发</span>
                                    </div>
                                    <div>
                                        <i class="far fa-clock"></i> 2天前
                                    </div>
                                    <div>
                                        <i class="fas fa-folder"></i> 前端开发
                                    </div>
                                </div>
                                <p class="question-content">
                                    我们团队正在开发一个大型React应用，随着功能增加，性能问题越来越明显，特别是在组件渲染和状态管理方面。请问有哪些经过实践验证的性能优化技巧？
                                </p>
                                <div class="answer-count">
                                    <i class="fas fa-comment"></i> 8个回答
                                </div>
                            </div>
                            <div class="content-footer">
                                <div class="content-stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i> 1.2k
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-thumbs-up"></i> 42
                                    </div>
                                </div>
                                <div class="content-actions">
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i> 收藏
                                    </button>
                                    <button class="action-btn">
                                        <i class="fas fa-share-alt"></i> 分享
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 问答2 -->
                        <div class="content-card">
                            <div class="content-body">
                                <h3 class="content-title">
                                    <a href="#">产品经理如何有效评估AI功能的可行性？</a>
                                </h3>
                                <div class="content-meta mb-3">
                                    <div class="content-creator">
                                        <img src="https://picsum.photos/100/100?random=81" alt="陈产品" class="content-avatar">
                                        <span>陈产品</span>
                                    </div>
                                    <div>
                                        <i class="far fa-clock"></i> 1周前
                                    </div>
                                    <div>
                                        <i class="fas fa-folder"></i> 产品管理
                                    </div>
                                </div>
                                <p class="question-content">
                                    作为一名产品经理，我想在我们的产品中加入一些AI功能，但不确定哪些功能是技术上可行的，以及如何评估其开发成本和效果。请问有什么方法或框架可以参考？
                                </p>
                                <div class="answer-count">
                                    <i class="fas fa-comment"></i> 12个回答
                                </div>
                            </div>
                            <div class="content-footer">
                                <div class="content-stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i> 956
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-thumbs-up"></i> 36
                                    </div>
                                </div>
                                <div class="content-actions">
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i> 收藏
                                    </button>
                                    <button class="action-btn">
                                        <i class="fas fa-share-alt"></i> 分享
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="pagination-container">
                        <div class="pagination">
                            <button class="page-btn disabled">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button class="page-btn active">1</button>
                            <button class="page-btn">2</button>
                            <button class="page-btn">3</button>
                            <button class="page-btn">4</button>
                            <button class="page-btn">5</button>
                            <button class="page-btn">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 投票详情页的投票功能
        const voteBtn = document.getElementById('detail-vote-btn');
        let voted = false;
        
        voteBtn.addEventListener('click', function() {
            const selectedOption = document.querySelector('input[name="detail-vote"]:checked');
            
            if (!selectedOption) {
                showToast('请先选择一个选项');
                return;
            }
            
            if (voted) {
                // 取消投票
                this.classList.remove('voted');
                this.innerHTML = '<i class="fas fa-check"></i> 投票';
                showToast('已取消投票');
                
                // 减少对应选项的百分比
                const option = selectedOption.closest('.voting-detail-option');
                const progressBar = option.querySelector('.progress-bar');
                const percentageText = option.querySelector('div:last-child span:first-child');
                const voteCountText = option.querySelector('div:last-child span:last-child');
                
                let percentage = parseInt(progressBar.style.width);
                let voteCount = parseInt(voteCountText.textContent);
                
                percentage -= 1;
                voteCount -= 1;
                
                progressBar.style.width = `${percentage}%`;
                percentageText.textContent = `${percentage}% 的用户选择了此项`;
                voteCountText.textContent = `${voteCount} 票`;
                
                // 更新总参与人数
                const totalVotesEl = document.querySelector('.voting-participants');
                let totalVotes = parseInt(totalVotesEl.textContent.match(/\d+/)[0]);
                totalVotesEl.innerHTML = `<i class="fas fa-users"></i> 已有 ${totalVotes - 1} 人参与投票`;
                
                voted = false;
            } else {
                // 进行投票
                this.classList.add('voted');
                this.innerHTML = '<i class="fas fa-check"></i> 已投票';
                showToast('投票成功');
                
                // 增加对应选项的百分比
                const option = selectedOption.closest('.voting-detail-option');
                const progressBar = option.querySelector('.progress-bar');
                const percentageText = option.querySelector('div:last-child span:first-child');
                const voteCountText = option.querySelector('div:last-child span:last-child');
                
                let percentage = parseInt(progressBar.style.width);
                let voteCount = parseInt(voteCountText.textContent);
                
                percentage += 1;
                voteCount += 1;
                
                progressBar.style.width = `${percentage}%`;
                percentageText.textContent = `${percentage}% 的用户选择了此项`;
                voteCountText.textContent = `${voteCount} 票`;
                
                // 更新总参与人数
                const totalVotesEl = document.querySelector('.voting-participants');
                let totalVotes = parseInt(totalVotesEl.textContent.match(/\d+/)[0]);
                totalVotesEl.innerHTML = `<i class="fas fa-users"></i> 已有 ${totalVotes + 1} 人参与投票`;
                
                voted = true;
            }
        });
        
        // 投票选项选中效果
        document.querySelectorAll('.voting-detail-option').forEach(option => {
            const checkbox = option.querySelector('.option-checkbox');
            
            if (checkbox && !checkbox.disabled) {
                option.addEventListener('click', function() {
                    checkbox.checked = true;
                    
                    // 移除同组其他选项的选中状态
                    const name = checkbox.getAttribute('name');
                    document.querySelectorAll(`input[name="${name}"]`).forEach(input => {
                        if (input !== checkbox) {
                            input.closest('.voting-detail-option').classList.remove('selected');
                        }
                    });
                    
                    // 添加当前选项的选中状态
                    this.classList.add('selected');
                });
            }
        });
        
        // 分页功能
        document.querySelectorAll('.page-btn:not(.disabled)').forEach(btn => {
            btn.addEventListener('click', function() {
                const pagination = this.closest('.pagination');
                pagination.querySelectorAll('.page-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                
                const pageNum = this.textContent || '1';
                showToast(`已切换到第 ${pageNum} 页`);
            });
        });
        
        // 标签切换时的提示
        const tabButtons = document.querySelectorAll('.nav-tabs .nav-link');
        tabButtons.forEach(button => {
            button.addEventListener('shown.bs.tab', function() {
                const tabName = this.textContent.trim().replace(/\s*\([^)]*\)/, '');
                showToast(`已切换到 ${tabName} 内容`);
            });
        });
        

    </script>
</body>
</html>

